<template>
    <el-dialog
      title="充值"
      :visible="dialogVisible"
      width="70%"
      :center="true"
      :append-to-body="true"
      :before-close="handleClose">
      <div class="pay-dialog">
        <div class="notification">
          <span>1.游戏内卖元宝的都是骗子，请不要相信，以免上当受骗</span>
          <span>2.为了保证您的资金安全，充值前请关掉外挂，以免被病毒劫持导致资金被转移</span>
          <span>3.充值结束后，如果对钉钉结果有疑问，请记住订单ID，咨询平台客服</span>
          <span>4.如果出现杀毒软件误报，请退出杀毒软件后再充值</span>
        </div>
        <div class="warning">
          <span>如果IE或360浏览器无法正常充值，请使用其他浏览器，例如：搜狗、傲游等</span>
          <span>在下面选择一条打开最快的线路进行充值</span>
        </div>
        <div>
          <el-button type="success" plain @click="goPay">主充值</el-button>
          <el-button type="success" plain @click="goPay">备用充值1</el-button>
          <el-button type="success" plain @click="goPay">备用充值2</el-button>
          <el-button type="success" plain @click="goPay">备用充值3</el-button>
          <el-button type="success" plain @click="goPay">备用充值4</el-button>
        </div>
        <div class="rate">
          <span>充值0030 送 0020元</span>&nbsp;&nbsp;|&nbsp;&nbsp;
          <span>充值0050 送 0030元</span>&nbsp;&nbsp;|&nbsp;&nbsp;
          <span>充值0100 送 0070元</span>&nbsp;&nbsp;|&nbsp;&nbsp;
          <span>充值0300 送 0300元</span>&nbsp;&nbsp;|&nbsp;&nbsp;
          <span>充值0500 送 0500元</span>&nbsp;&nbsp;|&nbsp;&nbsp;
          <span>充值1000 送 1200元</span>&nbsp;&nbsp;|&nbsp;&nbsp;
          <span>充值2000 送 3500元</span>&nbsp;&nbsp;|&nbsp;&nbsp;
          <span>充值3000 送 7000元</span>&nbsp;&nbsp;|&nbsp;&nbsp;
          <span>充值5000 送 13000元</span>
        </div>
        <div class="footer">
          <span>合理游戏益脑</span>&nbsp;&nbsp;
          <span>沉迷游戏伤身</span>&nbsp;&nbsp;
          <span>合理安排时间</span>&nbsp;&nbsp;
          <span>享受健康生活</span>&nbsp;&nbsp;
          <span>抵制不良游戏</span>&nbsp;&nbsp;
          <span>谨防受骗上当</span>&nbsp;&nbsp;
        </div>
      </div>
    </el-dialog>
</template>

<script>
export default {
  name: 'PayDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClose () {
      this.$emit('handleClose')
    },
    goPay () {
      this.$emit('handleClose')
      /* eslint-disable */
      _hmt.push(['_trackEvent', 'pay', 'download_patch', '充值'])
      window.open('http://pay1.wodepay.net/app/acquire/req?gid=558')
    }
  }
}
</script>

<style scoped lang="scss">
.pay-dialog {
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .notification {
    width: 58%;
    display: flex;
    flex-direction: column;
    border: 1px solid #e6a23c;
    padding: 20px;
    font-size: 16px;
    line-height: 1.5;
  }
  .warning {
    color: red;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
  }
  .rate {
    margin: 20px 0;
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    color: #409eff;
    span {
      margin-bottom: 10px;
    }
  }
  .footer {
    margin-top: 40px;
  }
}
</style>
